<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-字体</title>
    <link rel="stylesheet" href="../../fa/css/all.css" />
    <style>
      p {
        color: red;
        font-size: 40px;
        background-color: #bfa;
        /* 有就用，没有就用后面的 */
        /* font-family: Georgia, cursive, sans-serif, serif; */
      }

      li {
        list-style: none;
      }

      /* not(:first-child) 排除第一元素 */
      li:not(:first-child)::before {
        content: "\f005";
        font-family: "Font Awesome 5 Free";
        /* font-family: 'Font Awesome 5 Brands'; */
        /* font-display: block; */
        font-weight: 900;
        color: blueviolet;
        margin-right: 10px;
      }

      /* 选择第一个li，然后使其居中 */
      li:first-child {
        /* color: #bfa; */
        margin: 0px 45px;
      }

      /* ::selection 选择器 伪元素 */
      li::selection {
        color: red;
        background-color: #bfa;
      }

      li[data-tooltip] {
        position: relative;
        cursor: pointer;
      }

      li[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        background: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        bottom: 100%;
        /* left: 50%; */
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 10;
      }

      /* i标签的hover i:hover */
      i:hover {
        background-color: pink;
        /* font-size: 60px; */
      }
    </style>
  </head>

  <body>
    <p>今天天气真不错 Hello word! How are you!</p>

    <i class="fas fa-cat"></i>
    <i class="fas fa-dragon"></i>
    <i class="fas fa-circle"></i>
    <i class="fas fa-home"></i>
    <i class="fas fa-bell"></i>
    <i class="fas fa-dog"></i>
    <i class="fas fa-frog"></i>
    <i class="fas fa-spider"></i>
    <i class="fas fa-play"></i>
    <i class="fas fa-car-crash"></i>
    <i class="fas fa-hiking"></i>
    <i class="fas fa-poo"></i>
    <i class="fas fa-terminal"></i>
    <i class="fas fa-save"></i>
    <i class="fas fa-car"></i>

    <ul>
      <li data-tooltip="这是提示文字"><strong>悯农</strong></li>
      <li>锄禾日当午</li>
      <li>汗滴禾下土</li>
      <li>谁知盘中餐</li>
      <li>粒粒皆辛苦</li>
    </ul>
  </body>
</html>
